<template>
	<div class="app-container">
		<!--    <div class="filter-container">
      <el-input v-model="listQuery.identifier" placeholder="编码" class="filter-item" />
      <el-input v-model="listQuery.name$lk" placeholder="商品名称" class="filter-item" />
      <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable class="filter-item">
        <el-option v-for="item in auditStatusJson" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>

    </div>-->
		<el-table v-loading="listLoading" :data="list" border fit highlight-current-row row-key="id"
			style="width: 100%;">
			<el-table-column label="序号" type="index" align="center" width="60px" />
			<!-- <el-table-column label="序号" prop="sequence" align="center" width="80px" /> -->
			<el-table-column label="直播名称" prop="name" align="center" />

			<el-table-column label="直播封面" align="center">
				<template slot-scope="{row}">
					<el-image style="width: 100px; height: 100px" v-if="row.imgUrl" :src="row.imgUrl"
						:preview-src-list="[row.imgUrl]">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="录播名称" prop="name" align="center" />
			<el-table-column label="时间" prop="createTime" align="center" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="{row}">

					<el-button slot="reference" size="mini" type="primary" @click="handleBan(row)">
						删除
					</el-button>

				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
			@pagination="getList" />


	</div>
</template>

<script>
	import {
		LiveQueryList,
		deletedLive

	} from '@/api/Live'
	import waves from '@/directive/waves' // waves directive
	import Pagination from '@/components/Pagination' // secondary package based on el-pagination
	import Cascader from '@/components/Cascader'
	// import Detail from './detail'

	export default {
		name: 'ProductList',
		directives: {
			waves
		},
		components: {
			Cascader,
			Pagination
		},
		data() {
			return {
				list: [],
				total: 0,
				listLoading: true,
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					status: 0
				},
				multipleSelection: [],
				categoryData: [],
				props: {
					value: 'id',
					label: 'name'
				},
				listQueryCategoryId: '',
				statusJson: [{
						value: 0,
						label: '下架'
					},
					{
						value: 1,
						label: '上架'
					}
				],
				auditStatusJson: [{
						value: 0,
						label: '待审核'
					},
					{
						value: 1,
						label: '已审核'
					},
				],
				temp: {
					id: 0,
					status: 1,
					imgUrl: ''
				},
				rules: {
					status: [{
						required: true,
						message: "请选择",
						trigger: "change"
					}],
				},
				dialogDetailVisible: false,
				dialogFormVisible: false,
				detail: {},
			}
		},
		watch: {},
		created() {
			this.getList()
		},
		methods: {
			handleBan(row) {
				this.$confirm('是否确定删除录播').then(() => {
					deletedLive({
						videoId: row.id
					}).then((res) => {
						this.getList();
						this.$notify({
							title: "成功",
							message: "操作成功",
							type: "success",
							duration: 2000
						});
					})
				})
			},
			getList() {
				this.listLoading = true
				LiveQueryList(this.listQuery).then(response => {
					console.log(response);
					this.list = response.records || []
					this.total = response.total
					this.listLoading = false
				})
			},
			handleFilter() {
				this.listQuery.pageNum = 1
				this.getList()
			},
			handleDetail(row) {
				this.getDetail(row.id).then(res => {
					this.detail = Object.assign({}, res)
					this.dialogDetailVisible = true;
				})
			},
			getDetail(id) {
				return new Promise((resolve, reject) => {
					productGetById(id)
						.then(res => {
							resolve(res);
						})
						.catch(err => {
							reject(err);
						});
				});
			},
			handleMember(row) {
				this.temp.id = row.id;
				this.temp.status = 1;
				this.dialogFormVisible = true;
			},

		}
	}
</script>
